<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM--文档对象模型（Document Object Model）</title>
<script type="text/javascript">
/*window对象的getElementsByTagName属性：获取所有P标签：
window.onload = function(){    
    var eles = document.getElementsByTagName('p');   
    for(var i=0; i<eles.length; i++){
        alert(eles[i].tagName +":"+ i +"个元素节点："+ eles[i].innerHTML);
    }
}
*/ 
/*通配符获取全部元素：
window.onload = function(){
    var all = document.getElementsByTagName('*');
    for(var i=0; i<all.length; i++){
        alert("第"+ (i+1) +"个元素节点："+ all[i].innerHTML);
    }
}   
*/
/*其他元素调用getElementsByTagName属性：
window.onload = function(){
    var div1 = document.getElementById('div');
    var ps = div1.getElementsByTagName('p');
    for(var i=0; i<ps.length; i++){
        alert(ps[i].tagName);   //P(元素名)
    }
    alert(ps.length);   //3
}
*/

/*getElementsByName
window.onload = function(){
    var t = document.getElementsByName('t1');
    for(var i=0; i<t.length; i++){
        alert(t[i].tagName);    //INPUT 
    }
    alert(t[0]);
}
*/

/*getAttribute和setAttribute获取和设置属性：*/
window.onload = function(){
    alert(123);
    var p = document.getElementById('p1');
    alert(p1.tagName);  //P 返回元素类型！
    var get = p.getAttribute("name"); //若查询未定义的属性,返回null
    alert(get); //p1
    var set = p.setAttribute('name','p2'); //[属性名,属性值] 设置属性值
    
    var get1 = p.getAttribute("name"); //FireFox
    var get2 = p.getAttribute('className'); //IE6(IE6中还必须以className获取元素的class属性值)
    alert(get1); //p2
    alert(get2); //p1 (其他浏览器+IE8以后,null)
    
    var cName = p1.className; //获得class属性的值
    alert(cName); //p1   
}


/*获取根节点：getElement
    alert(document.documentElement.tagName); //HTML
    var e = document.documentElement;
    alert(e.tagName); //HTML    
*/

/*常用节点操作：
 * 1、元素节点：文档中具有标签的节点
 * 2、文本节点：标签中未注释的文本块
 *   常用节点属性：
 *      nodeType:  节点类型; 元素节点：1 文本节点：3
 *      nodeName:  节点名称; 对于元素节点,返回tagName(标签名);对于文本节点,返回#text
 *      nodeValue: 节点值    ; 元素节点值为空，文本节点的nodeValue属性为文本内容
 *      firstChild:该元素节点包含的第一个子节点
 *      lastChild: 该元素节点包含的最后一个子节点
 *      previousSibling:该节点的上一个兄弟节点
 *      nextSibling:该节点的下一个兄弟节点
 *      childNodes:子节点列表;可用node.childNodes[index]或 node.childNodes.item(index)来获取子节点 
 * */
//应用：
window.onload = function(){
    var head = document.getElementsByTagName('head')[0]; //获取head节点
    var body = document.getElementsByTagName('body')[0]; //获取body节点
    //alert(head);  //[object HTMLHeadElement]
    //alert(body);  //[object HTMLBodyElement]
    var body = document.body;  //返回body节点的快捷方式！
    var type = body.nodeType;  //返回body节点的节点类型 1
    var name1= body.nodeName;  //返回body节点的节点名称 BODY
    var name2= body.tagName;   //返回body节点的标签名 BODY
    var value= body.nodeValue; //返回body节点的值 null
    var first= body.firstChild;//返回body节点下第一个子节点(！！空格或换行都算一个文本节点！！)[object Text]
    var last = body.lastChild; //返回body节点下最后一个子节点 [object Text]
    var list = body.childNodes;//返回body节点的子节点列表 [object NodeList]
    var next = body.nextSibling;    //返回body节点的下一个兄弟节点  null
    var prev = body.previousSibling;//返回body节点的上一个兄弟节点 [object Text]     
    
    //注意：
      //标准(Mozilla:FireFox,IE7,8,9)把空格解释成文本节点; 
      //非标准(IE6,5.5)忽略空格;
      
    //过滤空白文本节点：
    function filterSpaceNode(nodes){
        var arr = [];
        for(var i=0; i<nodes.length; i++){
            if(nodes.nodeType ===3 && /^\s+$/.test(nodes.nodeValue)){
                continue;
            }else{
                arr.push(nodes[i]);
            }
        }
        return arr;
    }
    //alert(list.length);
    //alert(filterSpaceNode(list).length);
    
    //过滤查找下一个不是空白文本的兄弟节点：
    function nextSibling(node){
        
    }
    
}
</script>
</head>

<body>
    <h2>DOM--文档对象模型（Document Object Model）</h2>
    <p id="p1" name="p1" class="p1">
        子节点，子元素
        后代元素
        文本也是节点
    </p>
    <p id="p2">
        我是文本节点！
    </p>
    
    <div id="div">
        <p>文本节点1</p>
        <p>文本节点2</p>
        <p>文本节点3</p>
    </div>
    
    <form method="post" action="">
        <input type="text" name="t1" /> 
        <input type="password" name="t1" /> 
        <input type="text" name="t2" />    
    </form>

</body>
</html>
